<!--
功能：菜单权限
作者：Maoxiangdong
邮箱：862755519@qq.com
时间：2023-12-15 09:08:56
-->
<template>
  <div>
    <!-- 页面标题 -->
    <PageTitle
      title="菜单权限"
      subTitle="根据不同角色返回不同的菜单数据，前端处理成路由对象渲染，请切换不同的角色账号查看效果"
    ></PageTitle>
    <div class="page-content">
      <a-alert
        message="不用用户角色拥有不同的菜单权限，请切换账号查看"
        description="Admin角色，账号：admin，密码：123456，Test角色，账号：test，密码123456"
        type="info"
      />
      <vxe-table
        border
        size="small"
        :column-config="{ resizable: true }"
        :tree-config="{ accordion: true }"
        :data="tableData"
        style="margin-top: 10px"
      >
        <vxe-column type="seq" width="50" align="center"></vxe-column>
        <vxe-column field="meta.title" title="菜单名称" tree-node width="160"></vxe-column>
        <vxe-column field="meta.icon" title="菜单图标" width="80" align="center">
          <template #default="{ row }">
            <i
              v-if="row.meta && row.meta.icon"
              class="iconfont"
              :class="row.meta.icon"
              :size="20"
            />
          </template>
        </vxe-column>
        <vxe-column field="hidden" title="显示/隐藏" width="80" align="center">
          <template #default="{ row }">
            <a-tag color="red" v-if="row.hidden">隐藏</a-tag>
            <a-tag color="blue" v-else>显示</a-tag>
          </template>
        </vxe-column>
        <vxe-column field="path" title="路由地址" width="200"></vxe-column>
        <vxe-column field="name" title="路由名称" width="200"></vxe-column>
        <vxe-column field="alwaysShow" title="嵌套路由" align="center" width="80">
          <template #default="{ row }">
            <span v-if="row.alwaysShow" style="color: #2d8cf0">是</span>
            <span v-else style="color: #ed4014">否</span>
          </template>
        </vxe-column>
        <vxe-column field="redirect" title="重定向路由" width="200"></vxe-column>
        <vxe-column field="meta.noCache" title="是否缓存" width="80" align="center">
          <template #default="{ row }">
            <span v-if="row.meta.noCache" style="color: #2d8cf0">是</span>
            <span v-else style="color: #ed4014">否</span>
          </template>
        </vxe-column>
        <vxe-column field="meta.breadcrumb" title="面包屑显示" width="100" align="center">
          <template #default="{ row }">
            <span v-if="row.meta.breadcrumb" style="color: #2d8cf0">是</span>
            <span v-else style="color: #ed4014">否</span>
          </template>
        </vxe-column>
        <vxe-column field="meta.activeMenu" title="高亮菜单" width="80" align="center">
          <template #default="{ row }">
            <span v-if="row.meta.activeMenu" style="color: #2d8cf0">是</span>
            <span v-else style="color: #ed4014">否</span>
          </template>
        </vxe-column>
        <vxe-column field="meta.affix" title="固定Tab栏" width="100" align="center">
          <template #default="{ row }">
            <span v-if="row.meta.affix" style="color: #2d8cf0">是</span>
            <span v-else style="color: #ed4014">否</span>
          </template>
        </vxe-column>
        <vxe-column field="component" title="组件" min-width="200"> </vxe-column>
      </vxe-table>
    </div>
  </div>
</template>

<script setup>
import { computed, ref } from 'vue'
import useUserStore from '@/store/modules/user'
const userStore = useUserStore()
const tableData = ref([])
const getTableData = () => {
  tableData.value = userStore.menuList
  console.log(tableData.value)
}
getTableData()
</script>
<style lang="scss" scoped>
.page-content {
  box-shadow: 0 0 6px 0 rgba(51, 51, 51, 0.08);
  margin-top: 10px;
  border-radius: 4px;
  padding: 15px;
  background-color: #ffffff;
}
</style>
